{% load i18n thumbnail %}

<form class="form-horizontal col-md-6" method="POST" enctype="multipart/form-data">
  {% csrf_token %}

  <div class="form-group{% if form.status.errors %} has-error{% endif %}">
    <label for="{{ form.status.id_for_label }}" class="col-sm-2 control-label">{% trans 'Status' %}</label>

    <div class="col-sm-10">
      {{ form.status }}
      {{ form.status.errors }}
    </div>
  </div>

  <div class="form-group{% if form.name.errors %} has-error{% endif %}">
    <label for="{{ form.name.id_for_label }}" class="col-sm-2 control-label">{% trans 'Name' %}</label>

    <div class="col-sm-10">
      {{ form.name }}
      {{ form.name.errors }}
    </div>
  </div>

  <div class="form-group{% if form.profile_picture.errors %} has-error{% endif %}">
    <label for="{{ form.profile_picture.id_for_label }}" class="col-sm-2 control-label">{% trans 'Photo' %}</label>

    <div class="col-sm-10">
      {{ form.profile_picture }}
      {{ form.profile_picture.errors }}
      <span class="help-block">{{ form.profile_picture.help_text }}</span>
    </div>
  </div>

  <div class="form-group{% if form.description.errors %} has-error{% endif %}">
    <label for="{{ form.description.id_for_label }}" class="col-sm-2 control-label">{% trans 'Description' %}</label>

    <div class="col-sm-10">
      {{ form.description }}
      {{ form.description.errors }}
    </div>
  </div>

  <div class="form-group{% if form.state.errors %} has-error{% endif %}">
    <label for="{{ form.state.id_for_label }}" class="col-sm-2 control-label">{% trans 'State' %}</label>

    <div class="col-sm-10">
      {{ form.state }}
      {{ form.state.errors }}
    </div>
  </div>

  <div class="form-group{% if form.city.errors %} has-error{% endif %}">
    <label for="{{ form.city.id_for_label }}" class="col-sm-2 control-label">{% trans 'City' %}</label>

    <div class="col-sm-10">
      {{ form.city }}
      {{ form.city.errors }}
    </div>
  </div>

  <div class="form-group{% if form.kind.errors %} has-error{% endif %}">
    <label for="{{ form.kind.id_for_label }}" class="col-sm-2 control-label">{% trans 'Kind' %}</label>

    <div class="col-sm-10">
      {{ form.kind }}
      {{ form.kind.errors }}
    </div>
  </div>

  <div class="form-group{% if form.size.errors %} has-error{% endif %}">
    <label for="{{ form.size.id_for_label }}" class="col-sm-2 control-label">{% trans 'Size' %}</label>

    <div class="col-sm-10">
      {{ form.size }}
      {{ form.size.errors }}
    </div>
  </div>

  <div class="form-group{% if form.sex.errors %} has-error{% endif %}">
    <label for="{{ form.sex.id_for_label }}" class="col-sm-2 control-label">{% trans 'Sex' %}</label>

    <div class="col-sm-10">
      {{ form.sex }}
      {{ form.sex.errors }}
    </div>
  </div>

  <div class="form-group">
    <input type="submit" name="submit" class="btn btn-primary pull-right" value="
    {% if pet %}
      {% trans 'Save Changes' %}
    {% else %}
      {% trans 'Register Pet' %}
    {% endif %}
    ">
  </div>
</form>

<div class="col-md-6">
  <img src="{{ form.instance.profile_picture|thumbnail_url:'pet_thumb' }}"
       class="img-thumbnail" alt="{% trans 'Pet Image' %}"
       id="picture" name="imagem"/>
</div>
